import {Component} from 'react'
import {Rnd} from 'react-rnd'
import {NodeWidgetEditor} from "../flow/NodeWidgetEditor"
import classNames from 'classnames'
import {FlowPortWidget} from "../flow/FlowPortWidget"
import {NodeEditor} from "../../FlowNodeEditor/NodeEditor"
import Resizable from 're-resizable';


export class FlowUnitWrapper extends Component{
    constructor (props){
        super(props)

        this.handleMouseOver = this.handleMouseOver.bind(this)
        this.handleMouseOut = this.handleMouseOut.bind(this)
        this.handleDoubleClick = this.handleDoubleClick.bind(this)
        this.hideModal = this.hideModal.bind(this)

        const{width, height, x, y, text } = this.props
        this.state = {
            x : x,
            y : y,
            width : width,
            height : height,
            text : text,
            transformX : 1,
            transformY : 1,
            hideClassName : 'hide',
            modal : false,
        }
    }

    handleMouseOver (e) {
        const {displayOnly} = this.props
        if(displayOnly){
            return
        }

        this.setState({hideClassName: classNames( '' )})
    }

    handleMouseOut (e) {
        const {displayOnly} = this.props
        if(displayOnly){
            return
        }

        this.setState({hideClassName: classNames('hide')})//hide
    }

    handleDoubleClick (e) {

        if(this.props.node && this.props.node.id){
            this.setState({modal: true})
        }
    }

    hideModal () {
        this.setState({
            modal: !this.state.modal,
        })
    }

    render (){
        const {width, height, children, node, displayOnly, ...attributes} = this.props

        const {name} = node

        return(
            <div
                onMouseOver={this.handleMouseOver}
                onMouseOut={this.handleMouseOut}
                onDoubleClick={this.handleDoubleClick}
                style={{width: this.state.width,  height: this.state.height}}>
                <Resizable defaultSize={{
                  width:this.state.width,
                  height:this.state.height,
                }}
                           onResizeStart={(e, d) => {
                             e.stopPropagation();
                             this.setState({ x: d.x, y: d.y }) }}
                           onResize={(e, direction, ref, d) => {
                               // e.stopPropagation();
                             const tfmX = ref.offsetWidth/width
                             const tfmY = ref.offsetHeight/height
                             this.setState({
                               width: ref.offsetWidth,
                               height: ref.offsetHeight,
                               transformX : tfmX,
                               transformY : tfmY,
                               // ...position,
                             })
                           }}
                >
                    <FlowPortWidget width={this.state.width} height={this.state.height} wrapper={this} name={name} node={node} {...attributes}>
                        {
                            children
                        }
                    </FlowPortWidget>
                </Resizable>

                <NodeWidgetEditor hideClassName={this.state.hideClassName} node={node}{...attributes}/>
                <NodeEditor isOpen={this.state.modal} hideModal={this.hideModal} node={node} />
            </div>

        )
    }

}
